<template>
  <div class="login_dialog_container">
    <div class="dialog">
      <div class="title_box">
        <div>修改头像</div>
        <img @click="closeDialog" src="@/assets/common/close.png">
      </div>
      <div class="avatar_area">
        <!--头像上传区域-->
        <div class="avatar_upload_area">
          <div class="cutting_area">
            <vue-cropper
              ref="cropper"
              :img="avatarUrl"
              :info="true"
              :autoCrop="options.autoCrop"
              :autoCropWidth="options.autoCropWidth"
              :autoCropHeight="options.autoCropHeight"
              :fixedBox="options.fixedBox"
              :outputType="options.outputType"
              @realTime="handleRealTime"
            />
<!--            <img :src="avatarUrl">-->
          </div>
          <!--上传头像按钮-->
          <div @click="triggerImgInput" class="avatar_upload_btn">
            <!-- 隐藏的文件输入 -->
            <input
              type="file"
              ref="imgInput"
              @change="handleImgChange"
              style="display: none;"
              accept=".png,.jpg"
            >
            <img src="@/assets/edit-ship/upload.png">
            <div>重新上传</div>
          </div>
        </div>
        <!--头像预览区域-->
        <div class="avatar_preview_area">
          <div class="avatar">
            <img :src="previewUrl">
          </div>
          <div>头像预览</div>
        </div>
      </div>
      <button @click="toEditAvatar">Submit</button>
    </div>
    <div class="mask"></div>
  </div>
</template>

<script setup>
import {ref, reactive,onMounted} from "vue";
import {ResultEnum} from "@/enums/ResultEnum.js";
import CommonApI from "@/api/common/index.js";
import {useUserStore} from "@/store/index.js";
import UserAPI from "@/api/user/index.js"
import 'vue-cropper/dist/index.css'
import  {VueCropper}  from "vue-cropper";


// cropper配置  更多配置可参考 https://www.npmjs.com/package/vue-cropper
const options = reactive({
  img: null, // 裁剪图片的地址
  autoCropWidth: 200, // 默认生成截图框宽度 默认容器的 80%
  autoCropHeight: 200, // 默认生成截图框高度 默认容器的 80%
  outputType: 'png', // 裁剪生成图片的格式 jpeg, png, webp
  autoCrop: true, // 是否默认生成截图框
  fixedBox: false // 固定截图框大小
})

const previewUrl = ref("")  //预览的url(base64格式)
const previewBlob = ref(null) //最终上传的blob文件
const cropper = ref(null);  // 替代 Vue 2 的 this.$refs.cropper


function handleRealTime(res){
  cropper.value.getCropBlob((dataURL) => {
    // blob文件 可以直接上传
    previewBlob.value = dataURL;
    console.log(previewBlob.value,"previewBlob")
  });

  cropper.value.getCropData((dataURL) => {
    // dataURL 就是可以直接用于预览的 base64 格式 URL
    previewUrl.value = dataURL
  });
}

onMounted(()=>{
  cropper.value.getCropData((dataURL) => {
    // dataURL 就是可以直接用于预览的 base64 格式 URL
    previewUrl.value = dataURL;
    console.log(dataURL); // 输出类似 "..."
  });
})

// 定义要触发的事件
const emit = defineEmits(['close']);

// 定义一个方法来触发事件
function closeDialog() {
  emit('close');
}

//修改头像
async function toEditAvatar(){
  //说明没有裁切图片 还是走文件上传
  let file = previewBlob.value
  console.log(file,"file是社么")
  let formData = new FormData();
  formData.append("file",file);
  let res = await CommonApI.upload(formData);
  avatarUrl.value = res.url
  if (res.code == 200) {
    UserAPI.editUserInfo({avatar:avatarUrl.value}).then((edirRes)=>{
      if (edirRes.code == ResultEnum.SUCCESS) {
        ElMessage.success("头像修改成功")
        closeDialog()
        userStore.clearUserInfo()
        userStore.getUserInfo()
      } else {
        ElMessage.error("头像修改失败")
      }
    })
  } else {
    ElMessage.error("头像上传失败")
  }
}

/**
 * 图片上传相关
 * */
// 触发文件选择对话框
const triggerImgInput = () => {
  imgInput.value.click();
};

const imgInput = ref(null);

const avatarUrl = ref("")

const userStore = useUserStore();
avatarUrl.value = userStore.getStoreUserInfo().avatar

//文件列表更改
function handleImgChange(e){
  const files = event.target.files;
  if (files.length > 0) {
    avatarUrl.value = URL.createObjectURL(files[0])
  }
}



</script>

<style lang="scss" scoped>
.login_dialog_container {
  padding: 24px;
  background-color: #fff;
  border-radius: 24px;
}

.dialog {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  z-index: 20;
  padding: 24px;
  border-radius: 24px;
}

.mask {
  position: fixed;
  left: 0;
  top: 0;
  background-color: rgba(0, 0, 0, .4);
  width: 100%;
  height: 100%;
  z-index: 10;
}

.title_box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 24px;
  font-weight: bold;
  line-height: 32px;
  color: #1C1E24;

  img {
    width: 24px;
    height: 24px;
  }
}

.avatar_area {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 432px;
  font-size: 14px;
  font-weight: normal;
  line-height: 20px;
  letter-spacing: normal;
  color: #808690;
  margin-top: 24px;
  .avatar_upload_area{
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    .cutting_area{
      width: 284px;
      height: 284px;
      img{
        width: 100%;
        height: 100%;
      }
    }

    .avatar_upload_btn{
      display: flex;
      align-items: center;
      font-size: 12px;
      line-height: 16px;
      color: #1C1E24;
      margin-top: 24px;
      img {
        width: 16px;
        height: 16px;
        margin-right: 4px;
      }
    }
  }

  .avatar_preview_area{
    img{
      width: 102px;
      height: 102px;
      border-radius: 50%;
    }
  }
}

button {
  border-radius: 8px;
  background: #1e90ff;
  font-size: 16px;
  font-weight: normal;
  line-height: 24px;
  text-align: center;
  letter-spacing: normal;
  color: #FFFFFF;
  width: 100%;
  padding: 8px 16px;
  margin-top: 24px;
}
</style>
